<template>
  <a-modal
    :title="title"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :okButtonProps="{ props: {disabled: disabled} }"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="msgCategory" label="消息类型">
          <a-radio-group v-model="model.msgCategory" :disabled="disableSubmit">
            <a-radio value="1">通知公告</a-radio>
            <a-radio value="2">系统消息</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="titile" label="标题">
          <a-input placeholder="请输入标题" v-model="model.titile" :readOnly="disableSubmit" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="msgAbstract" label="摘要">
          <a-textarea placeholder="请输入摘要" v-model="model.msgAbstract" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime" label="截至日期" class="endTime">
          <j-date
style="width: 100%"
:getCalendarContainer="node => node.parentNode"
v-model="model.endTime"
                  placeholder="请选择结束时间"
showTime
dateFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="msgType" label="接收用户">
          <a-radio-group v-model="model.msgType" :disabled="disableSubmit" @change="chooseMsgType">
            <a-radio value="USER">指定用户</a-radio>
            <a-radio value="ALL">全体用户</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="指定用户" v-if="userType">
          <j-select-multi-user
:returnKeys="returnKeys"
placeholder="请选择指定用户"
v-model="userIds"
                               :trigger-change="true"></j-select-multi-user>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优先级">
          <a-radio-group v-model="model.priority" placeholder="请选择优先级" :disabled="disableSubmit">
            <a-radio value="L">低</a-radio>
            <a-radio value="M">中</a-radio>
            <a-radio value="H">高</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelColX1" :wrapperCol="wrapperColX1" label="内容" class="j-field-content">
          <j-editor v-model="model.msgContent" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'

  import JDate from '@/components/jeecg/JDate'
  import JEditor from '@/components/jeecg/JEditor'
  import SelectUserListModal from './SelectUserListModal'
  import moment from 'moment'

  export default {
    components: { JEditor, JDate, SelectUserListModal },
    name: 'SysAnnouncementModal',
    data() {
      return {
        title: '操作',
        visible: false,
        disableSubmit: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        labelColX1: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperColX1: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        confirmLoading: false,
        validatorRules: {
          titile: [{ required: true, message: '请输入标题!' }],
          msgCategory: [{ required: true, message: '请选择消息类型!' }],
          msgType: [{ required: true, message: '请选择通告对象类型!' }],
          endTime: [{ required: true, message: '请选择结束时间!' }, { validator: this.endTimeValidate }],
          startTime: [{ required: true, message: '请选择开始时间!' }, { validator: this.startTimeValidate }],
          msgAbstract: [{ required: true, message: '请输入摘要!' }]
        },
        url: {
          queryByIds: '/sys/user/queryByIds',
          add: '/sys/annountCement/add',
          edit: '/sys/annountCement/edit'
        },
        userType: false,
        userIds: '',
        selectedUser: [],
        disabled: false,
        msgContent: '',
        userList: [],
        returnKeys: ['id', 'id'] // 用户选择返回字段
      }
    },
    created() {
    },
    methods: {
      add() {
        this.edit({})
      },
      edit(record) {
        this.model = {}
        this.disable = false
        this.visible = true
        this.getUser(record)
      },
      getUser(record) {
        // update-begin---author:wangshuai ---date:20211227  for：[JTC-191]系统通告参考vue3的来改，为单选按钮附默认值------------
        record.msgCategory = record.msgCategory ? record.msgCategory : '1'
        record.msgType = record.msgType ? record.msgType : 'ALL'
        record.priority = record.priority ? record.priority : 'H'
        // update-begin---author:wangshuai ---date:20211227  for：[JTC-191]系统通告参考vue3的来改，为单选按钮附默认值------------
        this.model = Object.assign({}, record)
        // 指定用户
        if (record && record.msgType === 'USER') {
          this.userType = true
          // update-begin---author:wangshuai ---date:20220104  for：[JTC-304]指定人员不支持分页勾选,换通用的用户组件------------
          this.userIds = record.userIds.substr(0, record.userIds.length - 1)
          // update-end---author:wangshuai ---date:20220104  for：[JTC-304]指定人员不支持分页勾选,换通用的用户组件------------
        }
      },
      close() {
        this.$emit('close')
        this.selectedUser = []
        this.visible = false
        this.$refs.form.resetFields()
      },
      handleOk() {
        const that = this
        // 当设置指定用户类型，但用户为空时，后台报错
        if (this.userType && !(this.userIds != null && this.userIds.length > 0)) {
          this.$message.warning('指定用户不能为空！')
          return
        }
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            if (this.userType) {
              // update-begin---author:wangshuai ---date:20220104  for：[JTC-304]指定人员不支持分页勾选,换通用的用户组件------------
              this.model.userIds = this.userIds + ','
              // update-end---author:wangshuai ---date:20220104  for：[JTC-304]指定人员不支持分页勾选,换通用的用户组件------------
            }
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.resetUser()
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          } else {
            return false
          }
        })
      },
      handleCancel() {
        this.visible = false
        this.$emit('close')
        this.$refs.form.resetFields()
        this.resetUser()
      },
      resetUser() {
        this.userType = false
        // update-begin---author:wangshuai ---date:20220318  for：[issues/I4X63V]vue有些页面报错，但是在线演示的却没有-----
        this.userIds = ''
        // update-end---author:wangshuai ---date:20220318  for：[issues/I4X63V]vue有些页面报错，但是在线演示的却没有-----
        this.disabled = false
      },
      chooseMsgType(e) {
        if (e.target.value == 'USER') {
          this.userType = true
        } else {
          this.userType = false
          // update-begin---author:wangshuai ---date:20220318  for：[issues/I4X63V]vue有些页面报错，但是在线演示的却没有-----
          this.userIds = ''
          // update-end---author:wangshuai ---date:20220318  for：[issues/I4X63V]vue有些页面报错，但是在线演示的却没有-----
        }
      },
      startTimeValidate(rule, value, callback) {
        let endTime = this.model.endTime
        if (!value || !endTime) {
          callback()
        } else if (moment(value).isBefore(endTime)) {
          callback()
        } else {
          callback('开始时间需小于结束时间')
        }
      },
      endTimeValidate(rule, value, callback) {
        let startTime = this.model.startTime
        if (!value || !startTime) {
          callback()
        } else if (moment(startTime).isBefore(value)) {
          callback()
        } else {
          callback('结束时间需大于开始时间')
        }
      }
    }
  }
</script>

<style scoped>

</style>
